<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TabBar 图标生成工具</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" type="image/png" href="images/logo.png">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/all.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f9fafb;
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }
        
        .header h1 {
            color: #10b981;
            margin: 0 0 10px 0;
        }
        
        .header p {
            color: #6b7280;
            margin: 0;
        }
        
        .icons-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .icon-card {
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        
        .icon-title {
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 20px;
        }
        
        .icon-preview {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 25px;
        }
        
        .icon-item {
            text-align: center;
        }
        
        .icon-display {
            width: 120px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #e5e7eb;
            border-radius: 16px;
            margin-bottom: 10px;
            background: white;
        }
        
        .icon-display i {
            font-size: 54px;
        }
        
        .icon-normal {
            color: #6b7280;
        }
        
        .icon-active {
            color: #10b981;
        }
        
        .icon-label {
            font-size: 12px;
            color: #9ca3af;
        }
        
        .download-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
        }
        
        .btn-primary {
            background: #10b981;
            color: white;
        }
        
        .btn-primary:hover {
            background: #059669;
        }
        
        .btn-secondary {
            background: #f3f4f6;
            color: #6b7280;
        }
        
        .btn-secondary:hover {
            background: #e5e7eb;
        }
        
        .generate-all {
            text-align: center;
            margin: 40px 0;
        }
        
        .btn-large {
            padding: 15px 40px;
            font-size: 16px;
            font-weight: 600;
        }
        
        .info-box {
            background: #f0f9ff;
            border: 1px solid #7dd3fc;
            border-radius: 12px;
            padding: 20px;
            margin: 30px 0;
        }
        
        .info-box h3 {
            color: #0369a1;
            margin: 0 0 10px 0;
        }
        
        .info-box ul {
            margin: 10px 0;
            padding-left: 20px;
        }
        
        .info-box li {
            color: #0f172a;
            margin: 5px 0;
        }
        
        canvas {
            display: none;
        }
        
        .success-message {
            background: #d1fae5;
            border: 1px solid #a7f3d0;
            color: #065f46;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1><i class="fa fa-download"></i> TabBar 图标生成工具</h1>
        <p>为微信小程序生成所需的 TabBar 图标（PNG格式，81×81px - 3倍图）</p>
    </div>
    
    <div class="info-box">
        <h3><i class="fa fa-info-circle"></i> 使用说明</h3>
        <ul>
            <li>本工具基于 Font Awesome 图标生成 PNG 格式的 TabBar 图标</li>
            <li>每个图标生成两个版本：未选中状态（灰色）和选中状态（绿色）</li>
            <li>图标尺寸：81x81px，适合微信小程序 TabBar 使用</li>
            <li>生成的文件可直接放入小程序 <code>images/</code> 目录</li>
        </ul>
    </div>
    
    <div class="icons-grid">
        <!-- 首页图标 -->
        <div class="icon-card">
            <div class="icon-title">首页图标</div>
            <div class="icon-preview">
                <div class="icon-item">
                    <div class="icon-display">
                        <i class="fa fa-home icon-normal"></i>
                    </div>
                    <div class="icon-label">未选中</div>
                </div>
                <div class="icon-item">
                    <div class="icon-display">
                        <i class="fa fa-home icon-active"></i>
                    </div>
                    <div class="icon-label">选中</div>
                </div>
            </div>
            <div class="download-buttons">
                <button class="btn btn-secondary" onclick="generateIcon('home', '#6b7280', 'tab-home.png')">
                    下载未选中
                </button>
                <button class="btn btn-primary" onclick="generateIcon('home', '#10b981', 'tab-home-active.png')">
                    下载选中
                </button>
            </div>
        </div>
        
        <!-- 服务图标 -->
        <div class="icon-card">
            <div class="icon-title">服务图标</div>
            <div class="icon-preview">
                <div class="icon-item">
                    <div class="icon-display">
                        <i class="fa fa-handshake icon-normal"></i>
                    </div>
                    <div class="icon-label">未选中</div>
                </div>
                <div class="icon-item">
                    <div class="icon-display">
                        <i class="fa fa-handshake icon-active"></i>
                    </div>
                    <div class="icon-label">选中</div>
                </div>
            </div>
            <div class="download-buttons">
                <button class="btn btn-secondary" onclick="generateIcon('handshake-o', '#6b7280', 'tab-service.png')">
                    下载未选中
                </button>
                <button class="btn btn-primary" onclick="generateIcon('handshake-o', '#10b981', 'tab-service-active.png')">
                    下载选中
                </button>
            </div>
        </div>
        
        <!-- 发布图标（加号） -->
        <div class="icon-card">
            <div class="icon-title">发布图标（加号）</div>
            <div class="icon-preview">
                <div class="icon-item">
                    <div class="icon-display">
                        <i class="fa fa-plus icon-normal"></i>
                    </div>
                    <div class="icon-label">未选中</div>
                </div>
                <div class="icon-item">
                    <div class="icon-display">
                        <i class="fa fa-plus icon-active"></i>
                    </div>
                    <div class="icon-label">选中</div>
                </div>
            </div>
            <div class="download-buttons">
                <button class="btn btn-secondary" onclick="generateIcon('plus', '#6b7280', 'tab-publish.png')">
                    下载未选中
                </button>
                <button class="btn btn-primary" onclick="generateIcon('plus', '#10b981', 'tab-publish-active.png')">
                    下载选中
                </button>
            </div>
        </div>
        
        <!-- 需求图标 -->
        <div class="icon-card">
            <div class="icon-title">需求图标</div>
            <div class="icon-preview">
                <div class="icon-item">
                    <div class="icon-display">
                        <i class="fa fa-list-alt icon-normal"></i>
                    </div>
                    <div class="icon-label">未选中</div>
                </div>
                <div class="icon-item">
                    <div class="icon-display">
                        <i class="fa fa-list-alt icon-active"></i>
                    </div>
                    <div class="icon-label">选中</div>
                </div>
            </div>
            <div class="download-buttons">
                <button class="btn btn-secondary" onclick="generateIcon('list-alt', '#6b7280', 'tab-demand.png')">
                    下载未选中
                </button>
                <button class="btn btn-primary" onclick="generateIcon('list-alt', '#10b981', 'tab-demand-active.png')">
                    下载选中
                </button>
            </div>
        </div>
        
        <!-- 我的图标 -->
        <div class="icon-card">
            <div class="icon-title">我的图标</div>
            <div class="icon-preview">
                <div class="icon-item">
                    <div class="icon-display">
                        <i class="fa fa-user icon-normal"></i>
                    </div>
                    <div class="icon-label">未选中</div>
                </div>
                <div class="icon-item">
                    <div class="icon-display">
                        <i class="fa fa-user icon-active"></i>
                    </div>
                    <div class="icon-label">选中</div>
                </div>
            </div>
            <div class="download-buttons">
                <button class="btn btn-secondary" onclick="generateIcon('user-o', '#6b7280', 'tab-my.png')">
                    下载未选中
                </button>
                <button class="btn btn-primary" onclick="generateIcon('user-o', '#10b981', 'tab-my-active.png')">
                    下载选中
                </button>
            </div>
        </div>
    </div>
    
    <div class="generate-all">
        <button class="btn btn-primary btn-large" onclick="generateAllIcons()">
            <i class="fa fa-download"></i> 一键生成所有图标
        </button>
        <div class="success-message" id="successMessage">
            ✅ 所有图标已生成完成！请检查下载文件夹。
        </div>
    </div>
    
    <div class="info-box">
        <h3><i class="fa fa-folder-open"></i> 使用方法</h3>
        <ul>
            <li>点击单个按钮下载对应图标，或点击"一键生成所有图标"下载全部</li>
            <li>将生成的 PNG 文件复制到小程序的 <code>wechat-yjyny/images/</code> 目录</li>
            <li>确保 <code>app.json</code> 中的 TabBar 配置正确引用这些图标文件</li>
            <li>图标已针对微信小程序优化，可直接使用</li>
        </ul>
    </div>
    
    <!-- 隐藏的 Canvas 用于生成图标 -->
    <canvas id="iconCanvas" width="81" height="81"></canvas>
    
    <script>
        // 图标配置
        const iconConfigs = [
            { icon: 'home', name: 'tab-home' },
            { icon: 'handshake-o', name: 'tab-service' },
            { icon: 'plus', name: 'tab-publish' },
            { icon: 'list-alt', name: 'tab-demand' },
            { icon: 'user-o', name: 'tab-my' }
        ];
        
        const colors = {
            normal: '#6b7280',
            active: '#10b981'
        };
        
        /**
         * 生成单个图标
         */
        function generateIcon(iconName, color, filename) {
            const canvas = document.getElementById('iconCanvas');
            const ctx = canvas.getContext('2d');
            
            // 清空画布
            ctx.clearRect(0, 0, 81, 81);
            
            // 设置字体和颜色
            ctx.font = '36px FontAwesome';
            ctx.fillStyle = color;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            // 获取Font Awesome字符
            const iconChar = getIconCharacter(iconName);
            
            // 绘制图标
            ctx.fillText(iconChar, 40.5, 40.5);
            
            // 转换为 PNG 并下载
            canvas.toBlob(function(blob) {
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }, 'image/png');
        }
        
        /**
         * 生成所有图标
         */
        function generateAllIcons() {
            let completed = 0;
            const total = iconConfigs.length * 2; // 每个图标2个状态
            
            iconConfigs.forEach(config => {
                // 生成未选中状态
                setTimeout(() => {
                    generateIcon(config.icon, colors.normal, `${config.name}.png`);
                    completed++;
                    if (completed === total) {
                        showSuccessMessage();
                    }
                }, completed * 200);
                
                // 生成选中状态
                setTimeout(() => {
                    generateIcon(config.icon, colors.active, `${config.name}-active.png`);
                    completed++;
                    if (completed === total) {
                        showSuccessMessage();
                    }
                }, (completed + 1) * 200);
            });
        }
        
        /**
         * 显示成功消息
         */
        function showSuccessMessage() {
            const message = document.getElementById('successMessage');
            message.style.display = 'block';
            setTimeout(() => {
                message.style.display = 'none';
            }, 3000);
        }
        
        /**
         * 获取Font Awesome图标字符
         */
        function getIconCharacter(iconName) {
            const iconMap = {
                'home': '\uf015',
                'handshake-o': '\uf2b5',
                'list-alt': '\uf022',
                'user-o': '\uf2c0',
                'plus': '\uf067'
            };
            
            return iconMap[iconName] || '\uf015';
        }
        
        /**
         * 检查Font Awesome是否加载完成
         */
        function checkFontLoaded() {
            const canvas = document.getElementById('iconCanvas');
            const ctx = canvas.getContext('2d');
            ctx.font = '36px FontAwesome';
            
            // 测试是否能正确渲染Font Awesome
            const testWidth = ctx.measureText('\uf015').width;
            
            if (testWidth === 0) {
                // Font Awesome未加载完成，等待后重试
                setTimeout(checkFontLoaded, 100);
            }
        }
        
        // 页面加载完成后检查字体
        window.addEventListener('load', checkFontLoaded);
        
        // 添加一些提示信息
        console.log('TabBar图标生成工具已就绪');
        console.log('支持的图标:', iconConfigs.map(c => c.icon).join(', '));
    </script>
</body>
</html>
